<template>
	<el-table :data="tableData" border highlight-current-row @selection-change="selectionChange">
		<el-table-column type="selection" min-width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
		<el-table-column property="loanCategory" label="借款类别" align="center"></el-table-column>
        <el-table-column property="levelOneSubjectName" label="一级科目" align="center"></el-table-column>
        <el-table-column  property="levelTwoSubjectName" label="二级科目" align="center"></el-table-column>
        <el-table-column property="levelThreeSubjectName" label="三级科目" align="center"></el-table-column>
        <el-table-column property="levelFourSubjectName" label="四级科目" align="center"></el-table-column>
        <el-table-column property="remark" label="备注" align="center"></el-table-column>
        <el-table-column property="approvalStatus" label="状态" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.approvalStatus === 0" style="color: #E6A23C">未审核</span>
                <span v-if="scope.row.approvalStatus === 1" style="color: #67C23A">审核通过</span>
                <span v-if="scope.row.approvalStatus === 2" style="color: #f00">审核不通过</span>
                <span v-if="scope.row.approvalStatus === 3" style="color: #409EFF">审核中</span>
                <span v-if="scope.row.approvalStatus === 4" style="color: #67C23A">审核完成</span>
                <span v-if="scope.row.approvalStatus === 5">知会我</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="center">
            <template slot-scope="scope">
                <span class="primary-text" @click="update(scope.row.id)">修改</span>
                <span class="primary-text" @click="view(scope.row.id)">查看</span>
                <span class="primary-text" v-if="status[0] === 0" @click="approveHandler(scope.row)">审核</span>
                <span class="primary-text">撤单</span>
            </template>
        </el-table-column>
	</el-table>
</template>
<script>
export default {
	data() {
		return {
			tableData: this.$store.state.borrowApproveOrderStore.tableData,
            status: this.$store.state.borrowApproveOrderStore.status,       //当前按钮操作状态
		}
	},
    methods: {
        selectionChange(arr) {
            this.$store.commit('borrowApproveOrderStore/multipleSelection', arr);
        },
        update(id) {            //修改单据
            this.$store.commit('borrowApproveOrderStore/updateRowId', id);      //保存修改的单据id
            this.$util.openLayerIframe({title: '借款类别审批单-修改', width: '800px', height: '500px', url: this.$domain + '/#/financial/borrowApproveOrder/form'});
        },
        view(id) {            //查看单据
            this.$store.commit('borrowApproveOrderStore/updateRowId', id);      //保存修改的单据id
            this.$util.openLayerIframe({title: '借款类别审批单-查看', width: '800px', height: '500px', url: this.$domain + '/#/financial/borrowApproveOrder/view'});
        },
        approveHandler(row) {      //审核单据
            this.$store.commit('borrowApproveOrderStore/updateRowId', row['id']);      //保存审核的单据id
            this.$store.commit('borrowApproveOrderStore/updateTaskId', row['taskId']);  //保存任务id
            this.$util.openLayerIframe({title: '单据审核', width: '400px', height: '370px', url: this.$domain + '/#/financial/borrowApproveOrder/approve'});
        }
    }
}
</script>